<template>
    <myx-table

               :data="data"
               :column="columns"
               :tableAttr="{ border: true }"
               searchField="name"
               :searchMethod="searchMethod"
               :total="total"
               :tableLoading="loading"
               @current-change="currentChange"
               :pageSize="pageSize"
               :currentPage="currentPage"
               @addData="addData"
               :showSelection="true">
        <template #tableCell="{ scope }">
            <div v-if="scope.column.key == 'action'">
                <el-button type="success" plain v-has:read>
                    <el-icon>
                        <View></View>
                    </el-icon>
                    查看
                </el-button>
                <el-button type="primary"
                           v-has:edit
                           @click="editData(scope.row)"
                           plain>
                    <el-icon>
                        <Edit></Edit>
                    </el-icon>
                    编辑
                </el-button>
                <el-button v-has:delete type="danger" plain @click="del(scope.row.sId)">
                    <el-icon>
                        <Delete></Delete>
                    </el-icon>
                    删除
                </el-button>
            </div>
            <div v-if="scope.column.key == 'headimgurl'">
                <el-image
                          style="width: 50px; height: 50px"
                          :src="scope.row.headimgurl"
                          :zoom-rate="1.2"
                          :preview-src-list="imgSrcList"
                          :initial-index="scope.$index"
                          fit="cover" />
            </div>
        </template>

    </myx-table>
    <myx-dialog
                @ok="handleOk"
                :reviewData="reviewData"
                :title="title"
                :action="action"
                :formItems="formItems"
                v-model="dialogVisible"></myx-dialog>
</template>

<script setup>
import { Edit, Delete, View } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { watchEffect } from 'vue';
//表格数据
let data = ref([])
let columns = ref([
    {
        key: "headimgurl",
        dataIndex: "headimgurl",
        align: 'center',
        tableCell: true,
        label: "头像",
        width: 100,
    },
    {
        key: "name",
        dataIndex: "name",
        align: 'center',
        label: '姓名'
    },
    {
        key: "class",
        dataIndex: "class",
        align: 'center',
        label: "班级"
    },
    {
        key: "degree",
        label: '学历',
        align: 'center',
        dataIndex: 'degree'
    },
    {
        key: 'productUrl',
        dataIndex: "productUrl",
        align: 'center',
        label: '项目'
    },
    {
        key: "cTime",
        label: "创建时间",
        align: 'center',
        dataIndex: "cTime"
    },
    {
        key: "action",
        dataIndex: "action",
        align: 'center',
        tableCell: true,
        label: '操作',
        width: 300
    }
])
//弹框数据
let formItems = [
    {
        key: 1,
        label: '班级',
        prop: "class",
        rules: [{ required: true, message: '请输入班级' }],
        type: 'text',
        modelProp: 'class'
    },
    {
        key: 2,
        label: '姓名',
        prop: "name",
        rules: [{ required: true, message: '请输入姓名' }],
        type: 'text'
    },
    {
        key: 3,
        label: '年龄',
        prop: "age",
        rules: [{ required: true, message: '请输入年龄' }],
        type: 'text'
    },
    {
        key: 4,
        label: '城市',
        prop: "city",
        rules: [{ required: true, message: '请输入城市' }]
    },
    {
        key: 5,
        label: '学历',
        prop: "degree",
        rules: [{ required: true, message: '请输入学历' }]
    },
    {
        key: 6,
        label: '项目地址',
        prop: "productUrl",
        rules: [{ required: true, message: '请输入项目' }]
    },
    {
        key: 7,
        label: '描述',
        prop: "description",
        rules: [{ required: true, message: '请输入描述' }]
    }
]
//分页
let currentPage = ref(1);
let pageSize = ref(6)
let total = ref(0)
//loading加载动画
let loading = ref(false)
//分页变化
let currentChange = page => {
    currentPage.value = page;
    getStuList()
}
//搜索的方法
let searchMethod = async (key, cur, size) => {
    return api.getStuListApi({ key, page: cur, count: size })
}
let getStuList = async () => {
    loading.value = true;
    try {
        let res = await api.getStuListApi({ count: pageSize.value, page: currentPage.value })
        console.log(res)
        data.value = res.data;
        total.value = res.total;
        loading.value = false;
    } catch (e) {
        console.log(e.toString())
        loading.value = false
    }
}

//控制dialog显示隐藏

let dialogVisible = ref(false)
//dialog标题
let title = ref('增加学员信息')
//dialog的操作方式
let action = ref('add')
//回显的数据
let reviewData = ref({})

//添加学员信息

let addData = () => {
    //展示弹框
    title.value = "增加学员信息"
    action.value = 'add'
    dialogVisible.value = true
}

//编辑学员信息

let editData = (row) => {
    title.value = '编辑学员信息'
    action.value = 'edit'
    dialogVisible.value = true;
    reviewData.value = row;
    console.log(row)

}

//删除学员信息
let del = async sId => {
    ElMessageBox.confirm("是否要删除这条信息", "删除提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    })
        .then(async () => {
            try {
                await api.delStuListApi({ sId })
                getStuList()
                ElMessage.success('删除成功')
            } catch (e) {
                ElMessage.error(e.toString())
            }
        })
        .catch(e => {
            ElMessage.warning('已取消删除')
        })
}

//dialog点击了确定按钮

let handleOk = async (data) => {
    // console.log(data)
    //先判断是添加还是编辑
    try {
        if (action.value == 'add') {
            //请求添加的接口
            await api.addStuListApi(data)
            ElMessage.success('添加成功')
        } else {
            //请求编辑的接口
            await api.updateStuListApi(data)
            ElMessage.success('修改成功')
        }
        //调用更新列表的方法
        getStuList()
    } catch (e) {
        ElMessage.error(e.toString())
    }
}

//图像预览

let imgSrcList = ref([]);

watchEffect(() => {
    // console.log(data.value)
    imgSrcList.value = data.value.map(item => item.headimgurl);
    // console.log(imgSrcList.value)
})



onMounted(() => {
    getStuList()
})
</script>

<script>
export default {
    name: 'product',
    meta: {
        name: "学员项目管理",
        icon: "icon-caixukun"
    }
}
</script>